<script setup>
import {onMounted, ref} from "vue";
import BasePagination from "@/components/common/BasePagination.vue";
// 表格数据
const tableData = ref([])
// 分页数据
const pageInfo = ref({
  current: 1,
  pages: 0,
  size: 20,
  total: 0
})

const getPageData = async (page, size) => {
  const response = await null
  const responseData = response.data.data
  tableData.value = responseData.records
  pageInfo.value.current = responseData.current
  pageInfo.value.pages = responseData.pages
  pageInfo.value.size = responseData.size
  pageInfo.value.total = responseData.total
}

const handlePagesEvent = (page, size) => {
  getPageData(page, size)
}

onMounted(() => {
  getPageData(1, 20)
})
</script>

<template>
  <el-table
    :data="tableData"
    :stripe="true"
    :border="true"
  >
    <el-table-column type="selection" width="40" />
    <el-table-column prop="formId" label="动态表单ID" />
    <el-table-column prop="fieldName" label="字段名" />
    <el-table-column prop="fieldLabel" label="字段标签" />
    <el-table-column prop="fieldType" label="字段类型" />
    <el-table-column prop="fieldDictId" label="关联字典ID" />
    <el-table-column prop="required" label="是否必填" />
    <el-table-column prop="defaultValue" label="默认值" />
    <el-table-column prop="maxLength" label="最大长度" />
    <el-table-column prop="viewRoleIds" label="可查看该字段的角色ID列表" />
    <el-table-column prop="editRoleIds" label="可编辑该字段的角色ID列表" />
    <el-table-column prop="hidden" label="是否默认隐藏" />
    <el-table-column label="操作">
      <template #default>
        <el-button link type="primary" size="small">修改</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <br/>
  <BasePagination :pageInfo="pageInfo" @pagesEvent="handlePagesEvent"></BasePagination>
</template>

<style scoped lang="scss">
.el-table {
  height: $table-height;
  width: 100%;
}
</style>